/**
 *   路由规则定义文件
 *   路由懒加载
 *     -lazy 懒加载组件的
 *     -Suspense  指定懒加载时触发的加载状态组件
 */
import { lazy, Suspense } from 'react'
import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
// 导入loading加载组件
import Loading from '@/components/Loading'
// 导入animate.css
import 'animate.css'
// 导入路由动画切换的组件
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import UserList from '../views/dashboard/users/Index'
// 懒加载组件
const Welcome = lazy(() => import('../views/dashboard/Welcome'))
const UserAdd = lazy(() => import('../views/dashboard/users/Add'))
const FilmIndex = lazy(() => import('../views/dashboard/films/Index'))
// const UserList = lazy(() => import('../views/dashboard/users/Index'))
const Routes = () => (
  <TransitionGroup>
    <CSSTransition
      timeout={700}
      classNames={{
        enterActive: 'animate__animated animate__fadeIn',
        exitActive: 'animate__animated animate__fadeOut'
      }}
      // 设置一个key 确认是否渲染
      key={useLocation().pathname}
    >
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route path="/dashboard/welcome" component={Welcome}></Route>
          <Route path="/dashboard/user/add" component={UserAdd}></Route>
          <Route path="/dashboard/user/index" component={UserList}></Route>
          <Route path="/dashboard/film/index" component={FilmIndex}></Route>
          <Redirect from="/dashboard" to="/dashboard/welcome" exact></Redirect>
        </Switch>
      </Suspense>
    </CSSTransition>
  </TransitionGroup>
)

export default Routes
